<template>
	<div>
		<Row style="text-align: left;margin-top: 41px;">
			<Col span="12" style="text-align: left;">
			<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
			<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">课时节次</span>
			</Col>
		</Row>
		<Row style="padding:35px 40px 0px 45px;width: 100%;">
			<Col span="24" style="text-align: left;display: inline-block;">
			<span style="margin: 0 10px ;">年&nbsp;&nbsp;&nbsp;&nbsp;级：</span>
			<Select v-model="grade" @on-change="gradeChange" style="width: 150px;text-align: center;">
				<Option v-for="item in gradeList" :value="item.value" :key="item.value">{{item.label}}</Option>
			</Select>

			<Button style="float: right;background-color: orange;color: white;font-size: 14px;margin: 0 45px;" @click="addtime">+&nbsp;添加课时</Button>
			</Col>
		</Row>
		<div style="min-height: 300px; padding-bottom:20px ;">
			<Row style="margin:0 auto;margin:20px 45px 5px 45px;color: #666666;border-radius: 10px; background-color: #f0f8ff;padding: 10px 0;">
				<Col span="3" style="text-align: center;width: 18%;">
				<span style="font-size: 16px;">时间</span>
				</Col>
				<Col span="4" style="text-align: center;width: 18%;">
				<span style="font-size: 16px;">上午</span>
				</Col>
				<Col span="3" style="text-align: center;width: 26%;">
				<span style="font-size: 16px;">午休</span>
				</Col>
				<Col span="3" style="text-align: center;width: 18%;">
				<span style="font-size: 16px;">下午</span>
				</Col>
				<Col span="3" style="text-align: center;width: 20%;">
				<span style="font-size: 16px;">操作</span>
				</Col>
			</Row>
			<Row v-for="(item,index) in manageList" :key="item.itemId" style="margin:0 auto;margin:20px 45px 5px 45px;">
				<Col span="3" style="text-align: center;width: 18%;">
				<span style="font-size: 16px;">{{item.time}}&nbsp;</span>
				</Col>
				<Col span="4" style="text-align: center;width: 18%;">
				<span style="font-size: 16px;">{{item.morning}}&nbsp;</span>
				</Col>
				<Col span="3" style="text-align: center;width: 26%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
				<span style="font-size: 16px;">{{item.rest}}&nbsp;</span>
				</Col>
				<Col span="3" style="text-align: center;width: 18%;">
				<span style="font-size: 16px;">{{item.afternoon}}&nbsp;</span>
				</Col>
				<Col span="4" style="text-align: center;width: 20%;">
				<Col span="4" style="text-align: center;width: 50%;">
				<a style="font-size: 16px;" @click="xkpkedit(index)">编辑&nbsp;</a>
				</Col>
				<Col span="4" style="text-align: center;width: 50%;">
				<a style="font-size: 16px;" @click="xkpkdel(index)">删除&nbsp;</a>
				</Col>
				</Col>
			</Row>
			<div v-if="sortSettingHidden" span="10" style=" width: 600px; z-index: 1000;background-color: white;margin:0 auto;position: absolute;top: 200px;left: 0;right: 0;text-align: left;height:550px;border: 1px solid #e9eaec;padding: 50px;border-radius: 15px;">
				<Row style="width: 100%;text-align: center;margin-bottom: 20px;">
					<span style="margin-bottom: 20px;font-size: 21px;">{{title}}</span>
				</Row>
				<Row style="font-size: 15px;">
					<Col style="text-align: center;padding: 10px;">
					<span>时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间:</span>
					<Select v-model="weekOne" @on-change="weekOneChange" style="text-align: center; width: 60%;position: relative;">
						<Option v-for="(item,index) in weekOneList" :value="item.label" :key="item.label">{{item.label}}</Option>
					</Select>
					</Col>
					<Col style="text-align: center;padding: 10px;">
					<span>上午课时:</span>
					<Select v-model="morningtime" @on-change="morningtimeChange" style="text-align: center; width: 60%;position: relative;">
						<Option v-for="(item,index) in morningtimeList" :value="item.label" :key="item.label">{{item.label}}</Option>
					</Select>
					</Col>
					<Col style="text-align: center;padding: 10px;">
					<span>午休时间:</span>
					<Input v-model="resttime" type="text" placeholder="请输入午休时间" style="text-align: center; width: 60%;position: relative;"></Input>
					</Col>
					<Col style="text-align: center;padding: 10px;">
					<span>下午课时:</span>
					<Select v-model="afternoontime" @on-change="afternoontimeChange" style="text-align: center; width: 60%;position: relative;">
						<Option v-for="(item,index) in afternoontimeList" :value="item.label" :key="item.label">{{item.label}}</Option>
					</Select>
					</Col>
				</Row>
				<Row style="text-align: center;">
					<Col span="24" style="margin-top:15px">
					<Button type="ghost" @click="cancel" icon="close-round" style="margin-right: 20px;">取消</Button>
					<Button v-if="this.title=='添加课时'?true:false" type="primary" @click="savesort" icon="checkmark-round">保存</Button>
					<Button v-if="this.title=='编辑课时'?true:false" type="primary" @click="editsavesort" icon="checkmark-round">保存</Button>
					</Col>
				</Row>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				obj: "",
				listitemId: "",
				resttime: "",
				weekOne: "周一",
				morningtime: "无课程",
				afternoontime: "无课程",
				sortSettingHidden: false,
				grade: 1,
				morningtimeList: [{
						value: 1,
						label: "无课程",
					},
					{
						value: 2,
						label: "1节",
					},
					{
						value: 3,
						label: "2节",
					},
					{
						value: 4,
						label: "3节",
					},
					{
						value: 5,
						label: "4节",
					},
					{
						value: 6,
						label: "5节",
					},
				],
				afternoontimeList: [{
						value: 1,
						label: "无课程",
					},
					{
						value: 2,
						label: "1节",
					},
					{
						value: 3,
						label: "2节",
					},
					{
						value: 4,
						label: "3节",
					},
					{
						value: 5,
						label: "4节",
					},
					{
						value: 6,
						label: "5节",
					},
				],
				weekOneList: [{
						value: 1,
						label: "周一",
					},
					{
						value: 2,
						label: "周二",
					},
					{
						value: 3,
						label: "周三",
					},
					{
						value: 4,
						label: "周四",
					},
					{
						value: 5,
						label: "周五",
					},
					{
						value: 6,
						label: "周六",
					},
					{
						value: 7,
						label: "周日",
					},
				],
				gradeList: [{
						value: 1,
						label: "高一",
					},
					{
						value: 2,
						label: "高二",
					},
					{
						value: 3,
						label: "高三",
					},
					{
						value: 4,
						label: "初一",
					},
					{
						value: 5,
						label: "初二",
					},
					{
						value: 6,
						label: "初三",
					},

				],
				manageList: [{
						itemId: "01",
						time: "周一",
						morning: "4节",
						rest: "12:00-14:30",
						afternoon: "4节",
					},
					{
						itemId: "02",
						time: "周二",
						morning: "4节",
						rest: "12:00-14:30",
						afternoon: "4节",
					},
					{
						itemId: "03",
						time: "周三",
						morning: "4节",
						rest: "12:00-14:30",
						afternoon: "4节",
					},
					{
						itemId: "04",
						time: "周四",
						morning: "4节",
						rest: "12:00-14:30",
						afternoon: "4节",
					},
					{
						itemId: "05",
						time: "周五",
						morning: "4节",
						rest: "12:00-14:30",
						afternoon: "3节",
					},
				],
			}
		},
		methods: {
			gradeChange: function() {},
			addtime: function() {
				this.sortSettingHidden = true
				this.title = "添加课时"
				this.resttime = ""
				this.weekOne = "周一"
				this.morningtime = "无课程"
				this.afternoontime = "无课程"
			},
			xkpkedit: function(index) {
				this.sortSettingHidden = true
				this.title = "编辑课时"
				this.obj=index
				this.listitemId=this.manageList[index].itemId
				this.resttime = this.manageList[index].rest
				this.weekOne = this.manageList[index].time
				this.morningtime = this.manageList[index].morning
				this.afternoontime = this.manageList[index].afternoon
			},
			xkpkdel: function(index) {
				this.manageList.splice(index, 1)
			},
			savesort: function() {
				this.sortSettingHidden = false
				if(this.resttime == "") {
					alert("午休时间不能为空")
				} else {
					this.manageList.push({
						itemId: "0" + (this.manageList.length + 1),
						rest: this.resttime,
						time: this.weekOne,
						morning: this.morningtime,
						afternoon: this.afternoontime,
					})
					alert('保存成功')
				}
			},
			cancel: function() {
				this.sortSettingHidden = false
			},
			weekOneChange: function() {},
			morningtimeChange: function() {},
			afternoontimeChange: function() {},
			editsavesort:function(){
				this.sortSettingHidden = false
				if(this.resttime == "") {
					alert("午休时间不能为空")
				} else {
					this.manageList.splice(this.obj, 1, {
						itemId: this.listitemId,
						rest: this.resttime,
						time: this.weekOne,
						morning: this.morningtime,
						afternoon: this.afternoontime,
					})
					alert('保存成功')
				}
			},
		},
	}
</script>

<style>

</style>